<!DOCTYPE html>
<html>
<head>
    <title>Online Office Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.ajaxupload.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/lib/jquery-toast-plugin/dist/jquery.toast.min.css">
    <script type="text/javascript" src="./assets/lib/jquery-toast-plugin/dist/jquery.toast.min.js"></script>
</head>
<body>
    <div id="loading" class="loading" style="display: none">
        <img src="./assets/imgs/loadingBar.gif"/>
    </div>
    <div class="container">
        <form id="form-1" class="form">
            <label>Choose an office file</label>
            <input type="file" name="uploadfile" /><br>
        </form>
        <button class="btn btn-primary" id="upload_btn">Click And Upload</button>
    </div>

</body>
<script type="text/javascript">
    $('#upload_btn').click(function() {
        $.toast({
            text : "Start Uploading",
            hideAfter: false,
            position : 'mid-center'
        });
        $("#loading").css("display", "block");
        $('#form-1').ajaxUpload({
            url : '/api/handle.php',
            error : function () {
                $("#loading").css("display", "none");
                $.toast({
                    stack: 1,
                    text : "Upload Failed",
                    hideAfter: false
                });
            },
            success : function (data) {
                $("#loading").css("display", "none");
                data = JSON.parse(data);
                if (data.code == 0){
                    $.toast({
                        stack: 1,
                        text : "Upload and Convert success",
                        hideAfter: false
                    });
                    setTimeout(function () {
                        window.location.href = "/viewer.html?file=" + encodeURIComponent(data.data.href);
                    }, 1000);
                }else{
                    $.toast({
                        stack: 1,
                        text : data.msg,
                        hideAfter: false
                    });
                }
            }
        });
    });


</script>

</html>